<template>
    <div class="pwd_container">
        <div class="wrap">
            <div class="top_title"><span style="color:var(--el-color-success)">温馨提示：</span>出于对您账户安全的考虑，请修改初始密码</div>
        <div class="pwd_wrap">
            <div class="top">

                <div class="title">修改密码</div>
            </div>
            <el-form :size="formSize" hide-required-asterisk style="max-width: 600px" :model="ruleForm"
                label-width="auto">
                <el-form-item label="">

                    <el-input :prefix-icon="Unlock" type="password" autofocus ref="inputRef" placeholder="请输入新密码"
                        @focus="handlePhoneFocus" v-model="ruleForm.newPassword" maxlength="11" clearable
                        autocomplete="off" />
                       
                </el-form-item>
                <el-form-item label="">
                    <el-input :prefix-icon="Lock" placeholder="请确认新密码" type="password" @focus="handlePasswordFocus"
                        v-model="ruleForm.confirmnewpassword" clearable />
                </el-form-item>
                <el-form-item style="flex-wrap: nowrap;">
                    <div class="btn_wrap">
                        <el-button type="primary" @click="submitForm">
                            确定
                        </el-button>

                    </div>
                </el-form-item>
            </el-form>
            
        </div>
        <div class="info"> ( 密码至少包含一个数字和一个字母,且长度为6-20位 )</div>
        </div>
        <SimpleKeyboard ref="simpleKeyboard" :input="isAccount ? ruleForm.newPassword : ruleForm.confirmnewpassword"
            @onChange="onKeyboardChange" @onKeyPress="onKeyPress"></SimpleKeyboard>

    </div>


</template>
<script setup lang='ts'>
// @ts-nocheck

import CloseApp from '../components/CloseApp.vue'
import MinWindow from '../components/MinWindow.vue'
import { Unlock, Lock, DocumentCopy } from '@element-plus/icons-vue'

import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import SimpleKeyboard from '@renderer/components/SimpleKeyboard.vue'
import { useUserStore } from '@renderer/store/user';
import { storeToRefs } from 'pinia'
import { changepwd } from '@renderer/api/login/index'
import { onMounted } from 'vue';


const userStore = useUserStore()

const { userInfo} = storeToRefs(userStore)
const userId = userInfo.value.user_userId



interface RuleForm {
    newPassword: string
    confirmnewpassword: string
}
const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    newPassword: '',
    confirmnewpassword: ''
})



const router = useRouter() //获得路由器


const submitForm = async () => {
    if (!/(?=.*\d)(?=.*[a-zA-Z]).{6,20}/.test(ruleForm.newPassword)) {
        ElMessage({
            message: '密码格式不正确',
            type: 'error'
        })
        return false
    }
    if (!ruleForm.confirmnewpassword) {
        ElMessage({
            message: '请再次输入密码',
            type: 'error'
        })

        return false
    }
    console.log(ruleForm.confirmnewpassword)
    console.log(ruleForm.newPassword)
    if (ruleForm.confirmnewpassword != ruleForm.newPassword) {
        ElMessage({
            message: '两次输入密码不一致',
            type: 'error'
        })

        return false
    }


    try {
      const {msg} =  await changepwd(userId,'123456',ruleForm.newPassword)
      ElMessage({
            message: msg,
            type: 'success'
        })
        router.replace('/index')
    } catch (error) {
        console.log(error)
    }
    
   


}

const inputRef = ref()
const isAccount = ref(true)

const handlePhoneFocus = () => {
    isAccount.value = true
}
const handlePasswordFocus = () => {
    isAccount.value = false
}

let simpleKeyboard = ref()
function onKeyboardChange(input) {

    if (isAccount.value) {
        ruleForm.newPassword = input
    } else {
        ruleForm.confirmnewpassword = input
    }
}
function onKeyPress(button) {
    if (button === '{enter}') {
        submitForm()
    }
}




</script>
<style scoped lang='scss'>
.top_title{
  width: 440px;
  text-align: center;  
  font-size: 14px;
  color: #fff;
  background-color: #596b57;
  padding: 10px 0px;
  box-sizing: border-box;
  border-radius: 6px;
  line-height: 1.5;
  margin: 0 auto 10px;
}
.pwd_container {
    background: linear-gradient(45deg, #00acee 50%, rgba(255, 255, 0, 0.8) 100%);
    height: 100%;
    
    box-sizing: border-box;
    .wrap{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: calc(100vh - 210px);
    }
}

.pwd_wrap {
    position: relative;
    z-index: 11; //这里设置z-index为11 避免被弹出的键盘覆盖住
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #dce9f1;
    box-shadow: 1px 1px 1px 10px rgba(156, 160, 153, 0.3);
    border-radius: 10px;

    .top {
        display: flex;
        align-items: center;
        justify-content: center;

        .title {
            color: #222;
            text-align: center;
            padding: 10px 0;
            font-size: 26px;
            letter-spacing: 2px
        }
    }


    :deep(.el-form-item__label) {
        color: #fff;
    }

    .btn_wrap {
        display: flex;
        align-items: center;
        width: 100%;

        button {
            width: 100%;
        }
    }
}
.info{
    text-align: center;
    color: #fff;
    padding-top: 10px;

}
</style>